<template>
	<view class="m-nologin" v-if="!userInfo" :style="{'--btn-color':configInfo.btnColor}">
		<view class="m-nologin_warp section-filter flex-center radius-5 flex-column">
			<text class="m-nologin_warp-title text-warning text-sm">{{ tipsText }}</text>
			<u-button class="m-nologin_warp-btn m-t-sm" size="mini" shape="circle" :color="configInfo.mainColor"  text="登录" @click="$util.go('auth/login')"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"m-nologin-section",
		props: ['tips'],
		data() {
			return {
				tipsText: this.tips || '需要登录账号'
			};
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
	}
</script>

<style lang="scss">
	.m-nologin{
		&_warp{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
		&_warp-title{
			letter-spacing: 1px;
		}
		&_warp-btn{
			color:var(--btn-color)!important;
			padding: 25rpx!important;
			width: 80px!important;
		}
	}
	.section-filter{
		background-color: #ffffff87;
		backdrop-filter: blur(10px);
	}
</style>